<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: OBKoro1
 * @LastEditTime: 2022-10-13 15:02:00
-->
<template>
  <el-form :inline="true" :model="searchData">
    <el-form-item label="参数名称">
      <el-input v-model="searchData.name" placeholder="参数名称" />
    </el-form-item>
    <el-form-item label="参数库区">
      <el-select v-model="searchData.reservoir" clearable>
        <!-- <el-tooltip
          v-for="(item, i) in $store.state.reiverList"
          :key="i"
          :content="item.river"
          placement="right"
          effect="light"
        >
        </el-tooltip> -->
        <el-option
          v-for="(item, i) in $store.state.reiverList"
          :key="i"
          :value="item.reservoir"
          :label="item.reservoir"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList">查询</el-button>
    </el-form-item>
    <el-button style="float: right" type="primary" @click="addDialog = true">
      新建
    </el-button>
  </el-form>

  <el-table
    :data="
      tableData.slice((currentPage - 1) * tableSize, currentPage * tableSize)
    "
    border
    stripe
    style="width: 100%; margin-top: 10px"
    max-height="700"
    height="700"
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="reservoir" label="库区" />
    <el-table-column prop="createComment" label="备注" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          v-if="scope.row.remark != '0'"
          type="primary"
          @click="tablePlanClick(scope.row)"
        >
          查看方案
        </el-button>
        <el-button
          v-if="scope.row.remark != '0'"
          type="danger"
          @click="deleteParams(scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:page-size="tableSize"
    v-model:currentPage="currentPage"
    :total="tableData.length"
    layout="prev, pager, next"
    style="float: right"
  />

  <el-dialog
    v-model="addDialog"
    width="400px"
    title="参数方案新增"
    draggable
    destroy-on-close
    @close="addFormData = { reservoir: '三峡库区' }"
  >
    <el-form
      ref="ruleFormRef"
      :model="addFormData"
      :rules="rules"
      :hide-required-asterisk="true"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="addFormData.name" placeholder="名称" />
      </el-form-item>
      <el-form-item label="库区">
        <el-select
          v-model="addFormData.reservoir"
          style="width: 100%"
          @change="getRiverData"
        >
          <el-tooltip
            v-for="(item, i) in $store.state.reiverList"
            :key="i"
            :content="item.river"
            placement="right"
            effect="light"
          >
            <el-option :value="item.reservoir" :label="item.reservoir" />
          </el-tooltip>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          v-model="addFormData.createComment"
          placeholder="备注"
        />
      </el-form-item>
      <el-form-item>
        <div style="position: absolute; right: 0; top: 0px">
          <el-button @click="addDialog = false">取消</el-button>
          <el-button
            type="primary"
            :loading="addBtnLoadingType"
            @click="addSubmit(ruleFormRef)"
          >
            新增
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";

import {
  searchClArgumentsInfo,
  addClArguments,
  delCLArgyments,
  addDefaultScheme,
} from "@/request/api";

export default defineComponent({
  name: "paramsList",
  setup: () => {
    const router = useRouter();
    const store = useStore();

    const state = reactive({
      // 新增弹窗状态
      addDialog: false,
      // 新增弹窗新增按钮载入状态
      addBtnLoadingType: false,

      // 查询条件
      searchData: {
        name: "",
        reservoir: "",
      },
      // 新增弹窗内表单数据
      addFormData: {
        name: "",
        reservoir: "三峡库区",
        createComment: "",
      },
      // 表格数据
      tableData: [],
      tableSize: 20,
      currentPage: 1,
    });

    const ruleFormRef = ref<FormInstance>();

    const rules = {
      name: [
        { required: true, message: "请输入参数方案名称", trigger: "blur" },
      ],
    };

    onMounted(() => {
      getList();
    });

    /**
     * @description: 获取列表
     * @return {*}
     */
    function getList() {
      searchClArgumentsInfo({ ...state.searchData }).then((res: any) => {
        state.tableData = res;
      });
    }

    /**
     * @description: 参数方案新增
     * @param {*}
     * @return {*}
     */
    async function addSubmit(formEl: FormInstance | undefined) {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          // 新增方案按钮修改为加载状态
          state.addBtnLoadingType = true;

          let obj = {
            createName: "",
            ...state.addFormData,
          };

          obj.createName = "王伟";

          // if (import.meta.env.DEV) {
          //   obj.createName = "王伟";
          // } else {
          //   obj.createName = JSON.parse(
          //     localStorage.getItem("userList")
          //   ).realName;
          // }

          if (state.addFormData.reservoir != "长江中下游") {
            addClArguments(obj).then((res: any) => {
              // 新增方案按钮取消加载状态
              state.addBtnLoadingType = false;

              if (res.code == 1) {
                ElMessage.success(res.msg);

                router.push({
                  name: "mainStreamDataAdd",
                  params: {
                    id: res.id,
                    ...obj,
                  },
                });
              }
            });
          } else {
            addDefaultScheme({
              planName: state.addFormData.name,
              parameterType: "3",
              reservoirName: "洞庭湖",
            }).then((res: any) => {
              // 新增方案按钮取消加载状态
              state.addBtnLoadingType = false;

              if (res.code === 200) {
                router.push({
                  name: "mainStreamDataAdd",
                  params: {
                    id: Object.values(res.data).join(","),
                    ...obj,
                  },
                });
              }
            });
          }
        }
      });
    }

    /**
     * @description: 删除参数方案
     * @param {*} params 表格行数据
     * @return {*}
     */
    function deleteParams(params) {
      ElMessageBox.confirm(`确认删除方案吗?`, "", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delCLArgyments({
          id: params.id,
          reservoir: params.reservoir,
        }).then((res: any) => {
          if (res.code == 1) {
            ElMessage.success(res.msg);
            getList();
          }
        });
      });
    }

    /**
     * @description: 双击表格进入
     * @return {*}
     */
    function tablePlanClick(row) {
      if (row.remark != 0) {
        router.push({
          name: "mainStreamDataAdd",
          params: {
            ...row,
          },
        });
      }
    }

    return {
      ...toRefs(state),
      rules,
      ruleFormRef,

      addSubmit,
      deleteParams,
      getList,
      tablePlanClick,
    };
  },
});
</script>

<style scoped lang="less">
.addBox {
  display: inline-block;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
